import { Button, Form, Modal } from "antd";
import React, { useState } from "react";
import { DeleteOutlined, LineChartOutlined, PlusOutlined } from "@ant-design/icons";
import EvaluationAndComposeSelect, {Value as EvaluationAndComposeSelectValue} from "@/components/EvaluationAndComposeSelect";
import EvaluationProjectSelect from "@/components/EvaluationProjectSelect";

interface Props{
  onOk: (src: string)=>void;
}

const URL_CENTER_STR = '/pure/evaluation-diff';

export default function SelectDataArticleModal(props: Props){
  const [form] = Form.useForm<FormValues>();

  const [visible,setVisible] = useState<boolean>(false);

  return <>
    <button
      className="control-item button"
      onClick={()=>{
        form.resetFields();
        setVisible(true);
      }}
    >
      <LineChartOutlined style={{marginRight: 5}}  />数据选择器
    </button>
    <Modal
      title="数据选择器"
      getContainer={()=>{
        return document.querySelector('.bf-container')!;
      }}
      open={visible}
      maskClosable={false}
      width={800}
      onCancel={()=>{
        setVisible(false);
      }}
      onOk={()=>{
        form.validateFields().then(formValues=>{
          const evaluationUuidsArr: string[]= [];
          const evaluationComposeUuidsArr: string[] = [];
          formValues.list.forEach(item=>{
            if(item.type === 'compose'){
              evaluationComposeUuidsArr.push(item.uuid);
            }else{
              evaluationUuidsArr.push(item.uuid);
            }
          })

          const urlSearchParams = new URLSearchParams();
          if(formValues.projectUuids?.length){
            urlSearchParams.append('projectUuids', formValues.projectUuids.join(','))
          }
          if(evaluationUuidsArr.length){
            urlSearchParams.append('evaluationUuids', evaluationUuidsArr.join(','))
          }
          if(evaluationComposeUuidsArr.length){
            urlSearchParams.append('evaluationComposeUuids', evaluationComposeUuidsArr.join(','))
          }
          props.onOk(`${URL_CENTER_STR}?${urlSearchParams.toString()}`);
          setVisible(false);
        })
    }}
      styles={{
        body: {
          paddingTop: 20,
        }
      }}
    >
        <Form form={form}>
          <Form.Item name="projectUuids" label="测试项">
            <EvaluationProjectSelect placeholder="不选为全部测试项" />
          </Form.Item>
          <Form.Item label="数据" required>
            <Form.List name="list" rules={[
              {
                validator: (_,value)=>{
                  if(!value?.length){
                    return Promise.reject('至少选择一项')
                  }
                  return Promise.resolve();
                }
              }
            ]}>
              {(fields, { add, remove })=>{
                return <>
                  {
                    fields.map(({ key, name, ...restField })=>{
                      return <div className="flex gap-[16px] items-start w-full">
                        <Form.Item
                          {...restField}
                          name={name}
                          className="flex-1 min-w-0"
                          key={key}
                          rules={[{ required: true, message: '请选择数据' }]}
                        >
                          <EvaluationAndComposeSelect />
                        </Form.Item>
                        <DeleteOutlined style={{
                          transform: 'translateY(8px)'
                        }} onClick={()=>{
                          remove(name);
                        }} />
                      </div>
                    })
                  }
                  <Form.Item>
                    <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                      新增一项
                    </Button>
                  </Form.Item>
                </>
              }}
            </Form.List>
          </Form.Item>
        </Form>
    </Modal>
  </>

}

interface FormValues{
  projectUuids: string[];
  list: EvaluationAndComposeSelectValue[];
}
